<template>
  <view class="container">
    <!-- 头部搜索栏 -->
    <view class="box">
      <view class="search-bar">
        <image class="location-icon" src="/static/location.png"></image>
        <text class="location-text">杭州市梦想小镇</text>
        <image class="bell-icon" src="/static/bell.png"></image>
      </view>
      <view class="search-input">
        <image class="search-icon" src="/static/search.png"></image>
        <input type="text" placeholder="永辉超市优惠商品" />
      </view>
    </view>
    <!-- 广告横幅 -->
    <view class="banner">
      <image class="banner-img" src="/static/assets/02.jpg"></image>
    </view>
    <!-- 功能图标区 -->
    <view class="function-icons">
      <view class="icon-item" v-for="(item, index) in iconList" :key="index">
        <image :src="item.icon" class="icon"></image>
        <text class="icon-text">{{ item.text }}</text>
      </view>
    </view>
    <!-- 附近店铺区 -->
    <view class="nearby-stores">
      <view class="store-header">
        <text>附近店铺</text>
        <b><view class="see-more" @click="seeMore" style="text - decoration: none;color:black;font-size:1em">查看更多</view></b>
      </view>
      <view class="store-item" v-for="(store, sIndex) in storeList" :key="sIndex"  @click="detail(store.id)">
        <view class="store-logo">
          <image :src="store.imgUrl" class="logo"></image>
        </view>
        <view class="store-info">
          <text class="store-name">{{ store.name }}</text>
          <view class="store-details">
            <text>月售: {{ store.sales}} 起送: {{ store.expressLimit}} 基础运费: {{ store.expressPrice }}</text>
            <br>
            <text class="promotion-text">{{ store.slogan}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      iconList: [
        { icon: '/static/assets/super.png', text: '超市便利' },
        { icon: '/static/assets/market.png', text: '菜市场' },
        { icon: '/static/assets/fruits.png', text: '水果店' },
        { icon: '/static/assets/flower.png', text: '鲜花绿植' },
        { icon: '/static/assets/drug.png', text: '医药健康' },
        { icon: '/static/assets/home.png', text: '家居时尚' },
        { icon: '/static/assets/cake.png', text: '烘焙蛋糕' },
        { icon: '/static/assets/sign.png', text: '签到' },
        { icon: '/static/assets/prestige.png', text: '大牌免运' },
        { icon: '/static/assets/red.png', text: '红包套餐' }
      ],
      storeList: []
    };
    
  },
  onLoad() {
    console.log('首页 onLoad');
  },
  onShow() {
    console.log('首页 onShow');
  },
  methods: {
    seeMore() {
      uni.navigateTo({
        url: '/pages/morestores/index'
      });
    },
    fetchStores() {
      uni.request({
        url: 'http://localhost:3000/data', 
        method: 'GET',
        success: (res) => {
          this.storeList = res.data;
        },
        fail: (err) => {
          console.error('请求店铺数据失败:', err);
        }
      });
    },
    // 点击后获取id并跳转到对应详情页
    detail(Id) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${Id}`
      });    
    }
  },
  mounted() {
    this.fetchStores();
  }
};
</script>

<style>
.container {
  padding: 15px;
  height: 801px;
  background-color: #74bcff;
}
.box{
  width: auto;
  height: 100px;
  
}
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.search-bar .location-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.search-bar .location-text {
  font-size: 18px;
  font-weight: bold;
}

.search-bar .bell-icon {
  width: 20px;
  height: 20px;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.search-input .search-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
}

.banner {
  position: relative;
  margin-bottom: 10px;
}

.banner .banner-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
}

.banner .banner-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.banner .banner-text .big-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.banner .banner-text .small-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.banner .banner-text .banner-btn {
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 12px;
}

.function-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.function-icons .icon-item {
  width: 20%;
  text-align: center; /* 使内部元素水平居中 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中对齐 */
  margin-bottom: 10px;
}

.function-icons .icon-item .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.function-icons .icon-item .icon-text {
  font-size: 11px;
}
/* .nearby-stores{
  background-color: aliceblue;
} */

.nearby-stores .store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.nearby-stores .store-header .see-more {
  color: #007AFF;
  font-size: 12px;
}

.nearby-stores .store-item {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
}

.nearby-stores .store-item .store-logo {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.nearby-stores .store-item .store-logo .logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nearby-stores .store-item .store-info {
  flex: 1;
}

.nearby-stores .store-item .store-info .store-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.nearby-stores .store-item .store-info .store-details {
  font-size: 12px;
  color: #666;
}

.nearby-stores .store-item .store-info .store-details .promotion-text {
  color: #FF5722;
}
</style>    